import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import VueEcharts from "../components/VueEcharts"
import VCharts from "../components/VCharts"
import BaiDuMap from "../components/BaiDuMap"
import TestFunction from "../components/TestFunction";
import Life from "../components/Life";
import Home from "../views/Home";
import Seamless from "../components/Seamless";
import DView from "../components/DView";
import BasicApi from "../components/BasicApi";
import BasicApiOne from "../components/BasicApiOne";
import BasicApiTwo from "../components/BasicApiTwo";
import BasicApiThree from "../components/BasicApiThree";
import BasicApiFour from "../components/BasicApiFour";
import BasicApiFive from "../components/BasicApiFive";
import BasicApiSix from "../components/BasicApiSix";
import BasicApiSeven from "../components/BasicApiSeven";
import BasicApiEight from "../components/BasicApiEight";
import BasicApiNine from "../components/BasicApiNine";
import BasicApiTen from "../components/BasicApiTen";
import BasicApiEleven from "../components/BasicApiEleven";
import BasicApiTwelve from "../components/BasicApiTwelve";
import BasicApiThirteen from "../components/BasicApiThirteen";
import Ranking from "../components/router/Ranking";
import Recommend from "../components/router/Recommend";
import Find from "../components/router/Find";
import My from "../components/router/My";
import Part from "../components/router/Part";
import AntDesginVue from "../components/AntDesignVue";

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: "/", // 默认hash值路径
      redirect: "/home" // 重定向到/home
      // 浏览器url中#后的路径被改变成/home-重新匹配规则
    },
    {
      path: '/antDesignVue',
      name: 'AntDesignVue',
      component: AntDesginVue
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/dview',
      name: 'DView',
      component: DView
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/vueecharts',
      name: 'VueEcharts',
      component: VueEcharts
    },
    {
      path: '/vcharts',
      name: 'VCharts',
      component: VCharts
    },
    {
      path: '/baidumap',
      name: 'BaiDuMap',
      component: BaiDuMap
    },
    {
      path: '/test',
      name: 'TestFunction',
      component: TestFunction
    },
    {
      path: '/life',
      name: 'Life',
      component: Life
    },
    {
      path: '/seamless',
      name: 'Seamless',
      component: Seamless
    },
    {
      path: '/basic',
      name: 'BasicApi',
      component: BasicApi
    },
    {
      path: '/basic1',
      name: 'BasicApiOne',
      component: BasicApiOne
    },
    {
      path: '/basic2',
      name: 'BasicApiTwo',
      component: BasicApiTwo
    },
    {
      path: '/basic3',
      name: 'BasicApiThree',
      component: BasicApiThree
    },
    {
      path: '/basic4',
      name: 'BasicApiFour',
      component: BasicApiFour
    },
    {
      path: '/basic5',
      name: 'BasicApiFive',
      component: BasicApiFive
    },
    {
      path: '/basic6',
      name: 'BasicApiSix',
      component: BasicApiSix
    },
    {
      path: '/basic7',
      name: 'BasicApiSeven',
      component: BasicApiSeven
    },
    {
      path: '/basic8',
      name: 'BasicApiEight',
      component: BasicApiEight
    },
    {
      path: '/basic9',
      name: 'BasicApiNine',
      component: BasicApiNine
    },
    {
      path: '/basic10',
      name: 'BasicApiTen',
      component: BasicApiTen
    },
    {
      path: '/basic11',
      name: 'BasicApiEleven',
      component: BasicApiEleven
    },
    {
      path: '/basic12',
      name: 'BasicApiTwelve',
      component: BasicApiTwelve
    },
    {
      path: '/basic13',
      name: 'BasicApiThirteen',
      component: BasicApiThirteen
    },
    {
      path: "/find",
      name: "Find",
      component: Find,
      children: [
        {
          path: "recommend",
          component: Recommend
        },
        {
          path: "ranking",
          component: Ranking
        }
      ]
    },
    {
      path: "/my",
      name: "My",
      component: My
    },
    {
      path: "/part",
      name: "Part",
      component: Part
    },
    {
      path: "/part/:username", // 有:的路径代表要接收具体的值
      component: Part
    }
  ],
  mode: "history" // 默认不写是"hash"
})
// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息)    目标
// 参数2: 从哪里跳转的路由 (路由对象信息)  来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地
// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

export default router
